<template>
  <div class="dashboard-container">
    <div id="gaodeMap" class="map-container"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectAll } from '@/api/monitor'

export default {
  name: 'GaodeMap',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      monitors: [],
      map: null
    }
  },
  mounted() {
    this.initMap()
  
  },
  methods: {
    initMap() {
      if (window.AMap) {
        this.createMap()
      } else {
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=d34f8b67c7cc296f94265a4171f66e97&callback=initMap'
        script.onload = () => {
          window.initMap = this.createMap.bind(this)
        }
        document.head.appendChild(script)
      }
    },
    createMap() {
      this.map = new AMap.Map('gaodeMap', {
        zoom: 11,
        center: [120.154354, 30.269398]
      })
      console.log('Map created:', this.map)
      this.fetchMonitors()
    },
    fetchMonitors() {
      selectAll() // 使用 selectAll 方法
        .then(response => {
          this.monitors = response.data
          console.log('Fetched monitors:', this.monitors) // 添加日志
          console.log('Map in fetchMonitors:', this.map) // 添加日志
          if (this.map) {
            this.addMonitors()
          }
        })
        .catch(error => {
          console.error('Error fetching markers:', error)
        })
    },
    addMonitors() {
      if (!this.monitors || this.monitors.length === 0) {
        console.warn('No monitors data available to add markers.')
        return
      }

       // 定义一个映射对象，将 monitorStatus 映射到图标 URL
      const iconMap = {
        0: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        1: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
        2: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
        3: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
        // 根据需要添加更多的状态和对应的图标 URL
      }

      this.monitors.forEach(data => {
        if (!data.monitorLon || !data.monitorLat) {
          console.warn('Invalid coordinates for monitor:', data)
          return
        }

        // 根据 monitorStatus 获取对应的图标 URL
        const iconUrl = iconMap[data.monitorStatus] || 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png' // 默认图标 URL

        const monitor = new AMap.Marker({
          position: new AMap.LngLat(data.monitorLon, data.monitorLat),
          title: data.monitorName,
          map: this.map,
          icon: iconUrl
        })

        const infoWindowContent = `
          <div style="padding: 10px;">
            <h3>${data.monitorName}</h3>
            <img src="${data.image}" alt="Monitor Image" style="width: 100%; height: auto;">
            <p><strong>地址:</strong> ${data.monitorAddress} </p>
            <p><strong>介绍:</strong> ${data.monitorIntroduce} </p>
            <p><strong>监测情况:</strong> ${data.monitorCondition} </p>
            <p><strong>病虫害:</strong> ${data.pest} </p>
            <p><strong>防治措施:</strong> ${data.protective} </p>
            <p><strong>创建人:</strong> ${data.createdBy}</p>
          </div>
        `

        const infoWindow = new AMap.InfoWindow({
          content: infoWindowContent,
          offset: new AMap.Pixel(0, -30),
          closeWhenClickMap: true 
        })

        monitor.on('click', () => {
          infoWindow.open(this.map, monitor.getPosition())
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.map-container {
  width: 100%;
  height: 800px;
  margin-top: 20px;
}
</style>
